﻿@page "/spinners"
@inject IStringLocalizer<Spinners> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<p>
    <b>@Localizer["P1"]</b>
    <br />
    @Localizer["P2"]
</p>

<DemoBlock Title="@Localizer["P3"]" Introduction="@Localizer["P4"]" Name="Normal">
    <Spinner></Spinner>
</DemoBlock>

<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]"  Name="Color">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Primary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Secondary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Success"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Danger"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Warning"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Info"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Light"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Dark"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="Growing">
    <Spinner SpinnerType="SpinnerType.Grow"></Spinner>
</DemoBlock>

<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="GrowingColor">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Primary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Secondary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Success"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Danger"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Warning"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Info"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Light"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Dark"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P11"]" Introduction="@Localizer["P12"]" Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small" SpinnerType="SpinnerType.Grow"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Flex">
    <div class="d-flex justify-content-center">
        <Spinner></Spinner>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P15"]" Introduction="@Localizer["P16"]" Name="Custom">
    <div class="d-flex align-items-center">
        <strong>@Localizer["P17"]</strong>
        <Spinner Class="ms-auto"></Spinner>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P18"]" Introduction="@Localizer["P19"]" Name="Float">
    <Spinner Class="float-end"></Spinner>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
